
<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title> 博客系统 </title>


    <!--STYLESHEET-->
    <!--=================================================-->



    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link href="/css/bootstrap.min.css" rel="stylesheet">


    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link href="/css/nifty.min.css" rel="stylesheet">


    <!--Nifty Premium Icon [ DEMONSTRATION ]-->
    <link href="/css/demo/nifty-demo-icons.min.css" rel="stylesheet">


    <!--=================================================-->



    <!--Pace - Page Load Progress Par [OPTIONAL]-->
    <link href="/plugins/pace/pace.min.css" rel="stylesheet">
    <script src="/plugins/pace/pace.min.js"></script>


    <!--Demo [ DEMONSTRATION ]-->
    <link href="/css/demo/nifty-demo.min.css" rel="stylesheet">

    <link id="theme" href="/css/themes/type-e/theme-dark.min.css" rel="stylesheet">

    <style type="text/css">
        @media (min-width: 768px){
            #content-container {
                padding-top: 0px;
            }

        }

            #content-container {
                padding-top: 0px;
            }
    </style>

</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->
<body>
<div id="container" class="effect ">



    <div class="boxed">

        <!--CONTENT CONTAINER-->
        <!--===================================================-->
        <div id="content-container">
            <div id="page-head">

                <!--Page Title-->
                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                <div id="page-title">
                    <h1 class="page-header text-overflow">博客系统




                    </h1>
                </div>
                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                <!--End page title-->


                <!--Breadcrumb-->
                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                <ol class="breadcrumb">
                    <li><a href="/"><i class="demo-pli-home"></i></a></li>
                    <li><a href="/index">主页</a></li>
                    <li class="active">内容</li>
                </ol>

               <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                <!--End breadcrumb-->

                <div style="clear:both;">

                </div>

            </div>


            <!--Page content-->
            <!--===================================================-->
            <div id="page-content">
                <div class="fixed-fluid">
                    <div class="fixed-sm-250 pull-sm-right">


                        <p class="pad-hor mar-top text-main text-bold text-sm text-uppercase">最近文章</p>
                        <div class="list-group bg-trans pad-btm bord-btm" id="recent-article-real">

                        </div>


                        <p class="pad-hor mar-top text-main text-bold text-sm text-uppercase">查找文章</p>
                        <div class="input-group pad-all bord-btm">
                            <input type="text" placeholder="输入要查找的文章" class="form-control">
                            <span class="input-group-btn">
					                     <button class="btn btn-primary add-tooltip" data-original-title="Send" type="button"><i class="demo-pli-paper-plane icon-lg"></i></button>
					                 </span>
                        </div>


                        <p class="pad-hor mar-top text-main text-bold text-sm text-uppercase">最新评论</p>
                        <div class="list-group bg-trans" id="recent-comment-real">



                        </div>
                    </div>
                    <div class="fluid">


                        <div class="panel blog blog-details" id="blog-details">
                            <div class="panel-body">
                                <div class="blog-title media-block">
                                    <div class="media-right textright">
                                        <a href="#" class="btn btn-icon demo-psi-twitter icon-lg add-tooltip" data-original-title="Twitter" data-container="body"></a>
                                        <a href="#" class="btn btn-icon demo-psi-instagram icon-lg add-tooltip" data-original-title="Instagram" data-container="body"></a>
                                    </div>
                                    <div class="media-body">
                                        <a href="#" class="btn-link">
                                            <h1 id="blogTitle">


                                            </h1>
                                        </a>
                                        <p>By <a href="#" class="btn-link" id="blogUesr">Aaron Chavez</a></p>
                                    </div>
                                </div>
                                <div class="blog-header" id="blog-picture">


                                    <small>Photo by: unsplash.com</small>
                                </div>
                                <div class="blog-content">

                                    <div class="blog-body">
                                        <p id="blogContent">


                                        </p>

                                    </div>
                                </div>
                                <div class="blog-footer">
                                    <div class="media-left">
                                        <span class="label label-success" id="createTime">


                                        </span>
                                        <small>作者 : <a href="#" class="btn-link" id="create-people">Admin</a></small>
                                    </div>
                                    <div class="media-body text-right">
                                        
                                    </div>
                                </div>


                                <!-- Comment form -->
                                <!--===================================================-->
                                <hr class="new-section-sm bord-no">
                                <p class="text-lg text-main text-bold text-uppercase">可以评论哦亲</p>
                                <form role="form">
                                    <div class="row">
                                        <div class="col-md-12" id="add-Comment-real">

                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <textarea class="form-control" rows="9" placeholder="可以在这里评论哦" id="add-comment-comment" name="add-comment-comment"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <button type="button" class="btn btn-success btn-block" onclick="AddComment();">
                                                <i class="fa fa-comment" ></i> 提交评论</button>
                                        </div>
                                    </div>
                                </form>
                                <!--===================================================-->
                                <!-- End Comment form -->




                                <hr class="new-section-sm">
                                <p class="text-lg text-main text-bold text-uppercase pad-btm">评论区</p>



                                <div id="real-comment">
                                    <!-- Comments -->
                                    <!--===================================================-->
                                    <div class="comments media-block">
                                        <a class="media-left" href="#"><img class="img-circle img-sm" alt="Profile Picture" src="/img/profile-photos/2.png"></a>
                                        <div class="media-body">
                                            <div class="comment-header">
                                                <a href="#" class="media-heading box-inline text-main text-bold">John Doe</a>
                                                <p class="text-muted text-sm">Today 10:41AM - 12/09/2017</p>
                                            </div>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
                                            <a class="btn btn-sm btn-default"><i class="icon-lg demo-pli-like"></i> Like </a>
                                            <a class="btn btn-sm btn-default"><i class="icon-lg demo-pli-right-4"></i> Reply</a>
                                        </div>
                                    </div>
                                    <!--===================================================-->
                                    <!-- End Comments -->
                                </div>




                            </div>
                        </div>

                    </div>
                </div>

            </div>
            <!--===================================================-->
            <!--End page content-->

        </div>
        <!--===================================================-->
        <!--END CONTENT CONTAINER-->





        <!--MAIN NAVIGATION-->
        <!--===================================================-->
        <nav id="mainnav-container">
            <div id="mainnav">


                <!--OPTIONAL : ADD YOUR LOGO TO THE NAVIGATION-->
                <!--It will only appear on small screen devices.-->
                <!--================================
                <div class="mainnav-brand">
                    <a href="index.html" class="brand">
                        <img src="/img/logo.png" alt="Nifty Logo" class="brand-icon">
                        <span class="brand-text">Nifty</span>
                    </a>
                    <a href="#" class="mainnav-toggle"><i class="pci-cross pci-circle icon-lg"></i></a>
                </div>
                -->





            </div>
        </nav>
        <!--===================================================-->
        <!--END MAIN NAVIGATION-->

    </div>



    <!-- FOOTER -->
    <!--===================================================-->
    <footer id="footer">

        <!-- Visible when footer positions are fixed -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div class="show-fixed pad-rgt pull-right">
            You have <a href="#" class="text-main"><span class="badge badge-danger">3</span> pending action.</a>
        </div>



        <!-- Visible when footer positions are static -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div class="hide-fixed pull-right pad-rgt">
            14GB of <strong>512GB</strong> Free.
        </div>



        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <!-- Remove the class "show-fixed" and "hide-fixed" to make the content always appears. -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

        <p class="pad-lft">&#0169; 2018 Your Company</p>



    </footer>
    <!--===================================================-->
    <!-- END FOOTER -->


    <!-- SCROLL PAGE BUTTON -->
    <!--===================================================-->
    <button class="scroll-top btn">
        <i class="pci-chevron chevron-up"></i>
    </button>
    <!--===================================================-->
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->





<!--JAVASCRIPT-->
<!--=================================================-->

<!--jQuery [ REQUIRED ]-->
<script src="/js/jquery.min.js"></script>


<!--BootstrapJS [ RECOMMENDED ]-->
<script src="/js/bootstrap.min.js"></script>


<!--NiftyJS [ RECOMMENDED ]-->
<script src="/js/nifty.min.js"></script>




<!--=================================================-->

<!--Demo script [ DEMONSTRATION ]-->
<script src="/js/demo/nifty-demo.min.js"></script>


<script src="/pagejs/blog/front/detail.js"></script>


</body>
</html>
